<template>
    <div>
        <div class="bg" v-if="src">
            <img class="img" :src="src"/>
        </div>
        <canvas ref="canvas"></canvas>
        <div class="over" @click="onSetting">S</div>
        <div class="over pic" @click="onPhoto">P</div>
        <input style="display: none;" type="file" ref="file" @change="onFile"/>
        <Setting></Setting>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { init } from './Edit';
import Setting from "./components/setting/index.vue"
import _ from "lodash";
import { usePop } from '@/stores/pop';
const canvas = ref<any>(null);
const pop = usePop();
const file = ref<any>(null);
const src = ref("")
onMounted(() => {
    console.log(canvas.value)
    init(canvas.value)
})

const onSetting = () => {
    pop.show("setting")
}

const onPhoto = ()=>{
    file.value.click();
}

const onFile = (e)=>{
    console.log("e", e)
    let f = e.target.files[0];
    let url = URL.createObjectURL(f);
    // let img = new Image();
    // img.src = url;
    src.value = url;
    setTimeout(() => {
        URL.revokeObjectURL(url);
    }, 300);
    // URL.revokeObjectURL(url);
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>